<template>
  <el-form :model="data" v-bind="formProps">
    <el-row v-bind="formProps" style="flex-wrap: wrap; display: flex;">
      <template v-for="(f, index) in fields">
        <el-col :span="f.span ? f.span : 24" :key="index" v-if="!f.hidden" :offset="f.offset ? f.offset : 0">
          <el-form-item :prop="f.key" :label-width="f.hiddenTitle ? '0' : ''">
            <template v-if="!f.hiddenTitle" v-slot:label>
              <span v-if="f.required" class="text-danger">*</span>
              <el-tooltip v-if="f.tips" :content="f.tips" placement="top">
                <div class="inline-block text-primary pointer">{{ f.name == 'checkbox' ? '' : f.title }}
                </div>
              </el-tooltip>
              <span v-else>{{ f.name == 'checkbox' ? '' : f.title }}</span>
            </template>
            <el-input v-if="f.name == 'textarea'" type="textarea" v-bind="f.props" v-on="f.events || {}"
              v-model="data[f.key]" :placeholder="f.props ? f.props.placeholder : ''">
            </el-input>
            <el-date-picker v-else-if="f.name == 'date'" v-model="data[f.key]" style="width: 100%" v-bind="f.props"
              v-on="f.events || {}" :placeholder="f.props ? f.props.placeholder : ''">
            </el-date-picker>
            <el-time-picker v-else-if="f.name == 'time'" v-model="data[f.key]" style="width: 100%" v-bind="f.props"
              v-on="f.events || {}">
            </el-time-picker>
            <el-time-select v-else-if="f.name == 'timeSelect'" v-model="data[f.key]" style="width: 100%"
              v-bind="f.props" v-on="f.events || {}">
            </el-time-select>
            <el-date-picker v-else-if="f.name == 'dateTime'" v-model="data[f.key]" style="width:100%" v-bind="f.props"
              v-on="f.events || {}">
            </el-date-picker>
            <template v-else-if="f.name == 'radio'">
              <el-radio v-for="o in f.options || []" :key="o.value" v-model="data[f.key]" :label="o.value"
                v-bind="f.props" v-on="f.events || {}">
                {{ o.label }}
              </el-radio>
            </template>
            <template v-else-if="f.name == 'radioGroup'">
              <el-radio-group v-model="data[f.key]" size="small" v-on="f.events || {}">
                <el-radio v-for="o in f.options || []" v-bind="f.props" :key="o.value" :label="o.value">{{ o.label }}
                </el-radio>
              </el-radio-group>
            </template>
            <el-checkbox v-else-if="f.name == 'checkbox'" v-model="data[f.key]" v-bind="f.props" v-on="f.events || {}">
              {{ f.title || '' }}
            </el-checkbox>
            <el-checkbox-group v-else-if="f.name == 'checkboxGroup'" v-model="data[f.key]" v-bind="f.props"
              v-on="f.events || {}">
              <el-checkbox v-for="o in f.options || []" :label="o.value" :key="o.value">{{ o.label }}
              </el-checkbox>
            </el-checkbox-group>
            <el-switch v-else-if="f.name == 'switch'" v-model="data[f.key]" v-bind="f.props" v-on="f.events || {}">
            </el-switch>
            <el-select v-else-if="f.name == 'select'" v-model="data[f.key]" v-bind="f.props" v-on="f.events || {}"
              style="width: 100%" :placeholder="f.props ? f.props.placeholder : ''">
              <el-option v-for="o in f.options" :key="o.key" :label="o.value" :value="o.key" :disabled='o.disabled'>
              </el-option>
            </el-select>
            <template v-else-if="f.name == 'cascader'">
              <el-cascader ref="cascader" style=" width: 100%" v-model="data[f.key]" :options="f.options"
                v-bind="f.props" v-on="f.events || {}"></el-cascader>
            </template>
            <dynamic-tag v-else-if="f.name == 'dynamicTag'" v-model="data[f.key]" v-bind="f.props">
            </dynamic-tag>
            <el-upload v-else-if="f.name == 'fileUploader'" :file-list="data[f.key]" v-bind="f.props">
              <el-button size="mini" type="primary" v-bind="f.props">点击上传</el-button>
              <!-- <span>{{data[f.key].length}}/{{f.props.limit}}</span> -->
              <template v-slot:tip>
                <div v-show="f.tips" class="el-upload__tip">{{ f.tips }}</div>
              </template>
            </el-upload>
            <el-input-number v-else-if="f.name == 'number'" v-model="data[f.key]" v-bind="f.props"
              v-on="f.events || {}">
            </el-input-number>
            <template v-else-if="f.name == 'labelSize'">
              <div class="flex f-i-c">
                <el-input style="max-width:80px;min-width:50px" v-bind="f.props" v-on="f.events || {}"
                  v-model="data[f.key][0]">
                </el-input>
                <span style="font-size:34px">×</span>
                <el-input style="max-width:80px;min-width:50px" v-bind="f.props" v-on="f.events || {}"
                  v-model="data[f.key][1]">
                </el-input>
                <span class="ml-5">mm</span>
              </div>
            </template>
            <template v-else-if="f.name == 'labelContent'">
              <template v-if="data[f.key] instanceof Array && data[f.key]">
                <el-row>
                  <el-col v-for="(k, ei) in data[f.key]" :key="ei" class="mb-10">
                    <div class="flex f-i-c">
                      <el-select v-model="data[f.key][ei]" v-bind="f.props" v-on="f.events || {}" style="width: 40%">
                        <el-option v-for="o in f.options || []" :key="o.value" :label="o.label" :value="o.value"
                          :disabled='o.disabled'>
                        </el-option>
                      </el-select>
                      <div class="flex f-i-c ml-10">
                        <el-button type="danger" circle icon="el-icon-minus" @click="() => {
                          let tmp = _.cloneDeep(this.data[f.key])
                          tmp.splice(ei, 1)
                          this.$emit(`update:data.${f.key}`, tmp)
                        }" v-if="data[f.key].length > 1">
                        </el-button>
                        <el-button type="primary" circle icon="el-icon-plus" @click="() => {
                          let tmp = _.cloneDeep(this.data[f.key])
                          tmp.push('')
                          this.$emit(`update:data.${f.key}`, tmp)
                        }" v-if="ei == data[f.key].length - 1">
                        </el-button>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </template>
            </template>
            <cron v-else-if="f.name == 'cron'" v-model:value="data[f.key]" v-bind="f.props" v-on="f.events || {}">
            </cron>
            <template v-else-if="f.name == 'slotKey'">
              <slot :name="`slotKey_${f.key}`"
                v-bind="{ key: f.key, data, props: f.props || {}, events: f.events || {} }">
              </slot>
            </template>
            <template v-else-if="f.name == 'button'">
              <el-button v-bind="f.props" v-on="f.events || {}">查看</el-button>
            </template>
            <el-input v-else v-model.trim="data[f.key]" v-bind="f.props"
              :placeholder="f.props ? f.props.placeholder : ''" v-on="f.events || {}">
            </el-input>
          </el-form-item>
          <div :style="{ 'padding-left': `${formProps.labelWidth}` }">
            <slot name='formItem' v-bind="{ item: f }"></slot>
          </div>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>
<script>
import DynamicTag from '@/components/Tag/Dynamictag'
import Cron from '@/components/Cron/Cron'

import _ from 'lodash'
export default {
  name: 'z-form',
  components: { DynamicTag, Cron },
  props: {
    fields: { type: Array, default: null },
    data: { type: Object, default: null },
    formProps: { type: Object, default: null },
  },
  created() {
    // console.log(this.data);
    if (new Array()) {
    }
    // console.log(this.$slots)
  },
  methods: {},
}
</script>

<style scoped>
.c {
  justify-items: space-between;
  justify-content: space-between;
}
</style>
